<template>
  <view class="productList" ref="container">

	  			<uni-search-bar @confirm="submitForm" :focus="true" v-model="where.keyword" 
	  				:radius="100" >
	  			</uni-search-bar>
	  
  <!--  <form @submit.prevent="submitForm">
      <view class="search  acea-row row-between-wrapper">
        <view class="input acea-row row-between-wrapper">
          <input placeholder="搜索商品信息" v-model="where.keyword" />
          <text class="iconfont icon-sousuo" @click="submitForm"></text>
        </view>
	
      </view>
    </form> -->
	<view class="cate">
	        <uni-data-select style="width: 100px"
			   :ellipsis ="false"
			   :clear-icon = "true"
			   placeholder="文档分类"
	          v-model="cateOne"
	          :localdata="category"
	          @change="change1"
	        ></uni-data-select>
			   <uni-data-select style="width: 100px"
			   placeholder="细分科目"
			     v-model="cateTwo"
			     :localdata="category2"
			     @change="change2"
			   ></uni-data-select>
	 
	</view>

	  <scroll-view class="purchase-body" scroll-y="true" @scrolltolower="scrolltolower" @scrolltoupper="scrolltoupper" @scroll="scroll" >
	    <my-unit @transfer="getCartNum" v-for="(item, index) in productList" :key="index" :info="item"></my-unit>
	  </scroll-view>

   
<view class="floating-button">
  <button @click="handleClick">
	  <image style=" width: 50px;height: 33px;" src="@/static/print.png"></image>
	</button>
  <span class="badge" v-if="cartNum>0">{{cartNum}}</span>
</view>

  </view>
</template>
<script>
import Recommend from "@/components/Recommend";
import { getProducts } from "@/api/store";
import Loading from "@/components/Loading";
import {VUE_APP_RESOURCES_URL} from "@/config"
import { getCategory,cate,getNumList,getCartCount } from '@/api/store';
import myUnit  from '@/components/myUnits/purchaseUnit/unit.vue';
export default {
  name: "GoodsList",
  components: {
    Recommend,
    Loading,
	myUnit
  },
  props: {},
  data: function () {
    // const { s = "", id = 0, title = "" } = this.$yroute.query;
    const s = "",
      id = 0,
      title = "";


    return {
		numList:[],

		cartNum:0,
		cateQuerry:{pid:0},
		cateOne:0,
		cateTwo:0,
		category: [],
		category2: [],
      hostProduct: [],
      productList: [],
      Switch: true,
      where: {
        page: 1,
        limit: 8,
        keyword: s,
        sid: id//二级分类id
     
      },
      title: title && id ? title : "",
      loadTitle: "",
      loading: false,
      loadend: false,
      price: 0,
      stock: 0,
      nows: false,
      recommendLoading: false,
      target: false,
	  RESOURCES_URL: VUE_APP_RESOURCES_URL
    };
  },
  watch: {
    title() {
      this.updateTitle();
    },
    $yroute(to) {
     
    },
  },
  mounted: function () {
	  this.loadCategoryData()
    const { s = "", id = 0, title = "" } = this.$yroute.query;
    this.where.keyword = s;
  

	getCartCount({
		numType: 0
	}).then(res => {
		
	this.cartNum = res.data.count
	});
	getNumList().then(res => {
		this.numList = res.data
	});
    this.getList();

	
	
	
  },
  onReachBottom() {
    this.recommendLoading = true;
    !this.loading && this.getList();
  },
  onHide() {

  },
  methods: {
	  handleClick(){
		  this.$yrouter.push({
		    path: "/pages/shop/ShoppingCart/index"
		  });
	  },
	  getCartNum(num){
	  	this.cartNum = num
	  },
	  /**
	   * @name 触底加载
	   */
	  scrolltolower(event){
	  	this.getList(this.page)
	  },
	   change1(e) {
	        console.log("e:", e);
			if(e){
			cate({pid:e}).then(res => {
				this.category2 = [];
				res.data.forEach((item, index) => {
				  const cateItem = { text: item.cateName, value: item.id };
				  this.category2.push(cateItem);
				});
			
			});	
			}else{
				this.category2 = []
				this.cateTwo = ''
			}
			
	      },
	  change2(e) {
		  this.where.sid = e
		  this.where.pages = 1
		   console.log("e:", e);
		   this.getList()
		 },
	  loadCategoryData() {
	  	cate(this.cateQuerry).then(res => {
	  		this.category = [];
	  		res.data.forEach((item, index) => {
	  		  const cateItem = { text: item.cateName, value: item.id };
	  		  this.category.push(cateItem);
	  		});

	  	});
	  	
	  },
	   onchange(e) {
	          const value = e.detail.value
	        },
	        onnodeclick(node) {
	        },
    changeRecommendLoading(recommendLoading) {
      this.recommendLoading = recommendLoading;
    },
    goGoodsCon(item) {
      this.$yrouter.push({
        path: "/pages/shop/GoodsCon/index",
        query: {
          id: item.id,
        },
      });
    },
    updateTitle() {
      // document.title = this.title || this.$yroute.meta.title;
    },
    getList() {
     var that = this
      console.log(`获取第${that.where.page}页数据`);
     	
     getProducts(that.where).then((res) => {
     	let list = res.data.records
     if(that.numList.length>0 && list.length>0){
     	list.forEach((item,index)=>{
     		for (let i = 0; i < that.numList.length; i++) {
     			let cartnumitem = that.numList[i]
     			if(cartnumitem.productId==item.id){
     				item.quantity = cartnumitem.cartNum
     			}
     		}
     	})
     }
     	
       that.loading = false;
       if (that.target) {
         that.productList = list;
       } else {
         that.productList.push.apply(that.productList, list);
       }
       that.target = false
       that.loadend = list.length < that.where.limit; //判断所有数据是否加载完成；
       that.where.page = that.where.page + 1;
     });
    },
    submitForm: function () {
		
      this.$set(this, "productList", []);
      this.where.page = 1;
      this.loadend = false;
      this.loading = false;
      this.getList();
    },
    //点击事件处理
    set_where: function (index) {
      let that = this;
      switch (index) {
        case 0:
          return that.$yrouter.push({
            path: "/pages/shop/GoodsClass/index",
          });
        case 1:
          if (that.price === 0) that.price = 1;
          else if (that.price === 1) that.price = 2;
          else if (that.price === 2) that.price = 0;
          that.stock = 0;
          break;
        case 2:
          if (that.stock === 0) that.stock = 1;
          else if (that.stock === 1) that.stock = 2;
          else if (that.stock === 2) that.stock = 0;
          that.price = 0;
          break;
        case 3:
          that.nows = !that.nows;
          break;
        default:
          break;
      }
      this.productList = [];
      that.$set(that, "productList", []);
      that.where.page = 1;
      that.target = true;
      that.loadend = false;
      that.getList();
    },
    //设置where条件
    setWhere: function () {
      let that = this;
      if (that.price === 0) {
        that.where.priceOrder = "";
      } else if (that.price === 1) {
        that.where.priceOrder = "asc";
      } else if (that.price === 2) {
        that.where.priceOrder = "desc";
      }
      if (that.stock === 0) {
        that.where.salesOrder = "";
      } else if (that.stock === 1) {
        that.where.salesOrder = "asc";
      } else if (that.stock === 2) {
        that.where.salesOrder = "desc";
      }
      that.where.news = that.nows ? "1" : "0";
    },
    switchTap: function () {
      let that = this;
      that.Switch = !that.Switch;
    },
	scroll(e){
		
		
	},
	
	scrolltoupper(){
		
	},
  },
};
</script>
<style scoped lang="less">
	.floating-button {
	  position: fixed; /* 固定位置，保持悬浮 */
	  bottom: 20px; /* 距底部20px */
	  right: 20px; /* 距右侧20px */
	  width: 60px;
	  height: 60px;
	}
	
	.floating-button button {
	  width: 100%;
	  height: 100%;
	  border-radius: 50%; /* 圆形 */
	  background-color: #007BFF; /* 蓝色背景 */
	  color: white;
	  border: none;
	  font-size: 24px; /* 加号大小 */
	  cursor: pointer;
	  display: flex;
	  align-items: center;
	  justify-content: center;
	  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* 阴影效果 */
	}
	
	.floating-button .badge {
	  position: absolute;
	  top: -10px; /* 角标的顶部位置 */
	  right: -10px; /* 角标的右侧位置 */
	  background-color: red;
	  color: white;
	  width: 25px;
	  height: 25px;
	  border-radius: 50%; /* 圆形 */
	  display: flex;
	  align-items: center; /* 内容垂直居中 */
	  justify-content: center; /* 内容水平居中 */
	  font-size: 14px;
	  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25); /* 阴影效果 */
	}
	.search.acea-row.row-between-wrapper{
		background-color: #ffffff;
	}
.noCommodity {
  // border-top: 3px solid #f5f5f5;
  padding-bottom: 1px;
}
.nav.acea-row.row-middle{
	background-color: #fff;
	color: #999;
	padding: 10px;
}
.cate{
	    width: 100%;
	    display: flex;
	    justify-content: flex-start;
	    background-color: #fff;
	    color: #999;
	    padding: 10px;
}
.list.acea-row.row-between-wrapper{
	background-color: #fff
}
.productList{
	padding: 10px;
	height: 100%;
	background-color: #fff;
}
.productList .list .item  {
	background-color: #fff;
	
}
.uni-select__selector{
	width: 600px;
}
// .item{
// 	background-color: #5c9060
// }

	.content {
	  background-color: #f5f5f5;
	  height: 100%;
	  overflow: hidden;
	 
	  
	}
	.purchase-body{
		height: calc(100% - 88upx);
		overflow: auto
	}
</style>
